<template>
	<view class="main-box">
		<view class="navigator-bar" :style="style">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">个人资料</text>
		</view>
		<view class="info-list">
			<view class="info-item">
				<text class="info-title">头像</text>
				<view class="info-content" @click="uploadAvatar()">
					<image class="avatar-img" :src="userInfo.avatar"></image>
					<image class="info-arrow" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-item">
				<text class="info-title">昵称</text>
				<view class="info-content">
					<input class="info-text" v-model="userInfo.nickName" placeholder="请输入昵称" @blur="changeNickname()" />
					<image class="info-arrow" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-item">
				<text class="info-title">手机号</text>
				<text class="info-text">{{ userInfo.mobile }}</text>
			</view>
			<view class="line"></view>
			<view class="info-item">
				<text class="info-title">性别</text>
				<view class="info-content">
					<picker @change="sexChange" :range="sexList">
						<text class="info-text">{{ sexList[userInfo.sex]}}</text>
					</picker>
					<image class="info-arrow" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-item">
				<text class="info-title">所在地</text>
				<view class="info-content">
					<picker @change="areaChange" :range="areaList" mode="multiSelector" @columnchange="pickerColumnchange" :value="areaIndex">
						<text class="info-text">{{ userInfo.city }} {{ userInfo.region }}</text>
					</picker>
					<image class="info-arrow" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-item">
				<text class="info-title">生日</text>
				<view class="info-content">
					<picker mode="date" @change="birthdayChange">
						<text class="info-text">{{ userInfo.birthday }}</text>
					</picker>
					<image class="info-arrow" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-item-sign">
				<view class="info-title" style="margin-bottom: 30rpx;">个性签名</view>
				<input class="signature-input" v-model="userInfo.signature" placeholder="写点什么吧" @blur="changeSignature()" />
			</view>
			<view class="line"></view>
			<view class="info-item-tag">
				<text class="info-title">标签</text>
				<view class="tag-box">
					<view class="tag-item" v-for="label of interests">{{ label }}</view>
					<view class="add-label" @click="chooseLabels()">
						<image class="add-label-img" src="/static/addPic1.png"></image>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js'
	
	export default {
		data() {
			return {
				style: 'margin-top: 0px;',
				userInfo: {},
				interests: [],
				sexList: ['女', '男'],
				areaList: [],
				areaIndex: [0, 0, 0]
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.style = `margin-top: ${res.safeAreaInsets.top}px`;
				}
			});
			this.initData();
			uni.$on('changeLabel', (labels) => {
				this.interests = labels;
				this.changeLabels();
			});
		},
		methods: {
			initData() {
				this.userInfo = this.$userInfo;
				this.interests = this.userInfo.labels.split(',');
				this.initAreaChoose();
			},
			initAreaChoose() {
				const provinceList = [];
				config.area.forEach(item => {
					provinceList.push(item.provinceName);
				})
				const citiesList = [];
				config.area[0].cities.forEach(item => {
					citiesList.push(item.cityName);
				})
				const countiesList = [];
				config.area[0].cities[0].counties.forEach(item => {
					if (item.countyName !== '市辖区') {
						countiesList.push(item.countyName);
					}
				})
				this.areaList = [provinceList, citiesList, countiesList];
			},
			back() {
				uni.navigateBack();
			},
			uploadAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (ret) => {
						const params = {
							files: ret.tempFilePaths
						}
						this.$apis.uploadFiles(params).then((res) => {
							if (res.code === 0) {
								const params = {
									avatar: res.data[0].url
								}
								this.$apis.updateUserInfo(params).then((userRes) => {
									if (userRes.code === 0) {
										this.$userInfo.avatar = res.data[0].url;
										uni.showToast({
											title: '修改成功!',
											icon:"success"
										})
									}
								});
							}
						});
					}
				})
			},
			changeNickname() {
				if (this.userInfo.nickName) {
					const params = {
						nickName: this.userInfo.nickName
					}
					this.$apis.updateUserInfo(params).then((res) => {
						if (res.code === 0) {
							this.$userInfo.nickName = this.userInfo.nickName;
							uni.showToast({
								title: '修改成功!',
								icon:"success"
							})
						}
					});
				}
			},
			sexChange(e) {
				this.userInfo.sex = e.detail.value;
				const params = {
					sex: this.userInfo.sex
				}
				this.$apis.updateUserInfo(params).then((res) => {
					if (res.code === 0) {
						this.$userInfo.sex = this.userInfo.sex;
						uni.showToast({
							title: '修改成功!',
							icon:"success"
						})
					}
				});
			},
			birthdayChange(e) {
				this.userInfo.birthday = e.detail.value;
				const params = {
					birthday: this.userInfo.birthday
				}
				this.$apis.updateUserInfo(params).then((res) => {
					if (res.code === 0) {
						this.$userInfo.birthday = this.userInfo.birthday;
						uni.$emit('refreshAge');
						uni.showToast({
							title: '修改成功!',
							icon:"success"
						})
					}
				});
			},
			changeSignature() {
				if (this.userInfo.signature) {
					const params = {
						signature: this.userInfo.signature
					}
					this.$apis.updateUserInfo(params).then((res) => {
						if (res.code === 0) {
							this.$userInfo.signature = this.userInfo.signature;
							uni.showToast({
								title: '修改成功!',
								icon:"success"
							})
						}
					});
				}
			},
			areaChange(e) {
				let value = e.detail.value;
				let province = this.areaList[0][value[0]];
				let city = this.areaList[1][value[1]];
				let county = this.areaList[2][value[2]];
				this.userInfo.region = county;
				if (city === '市辖区' || city === '县') {
					this.userInfo.city = province;
				} else {
					this.userInfo.city = city;
				}
				const params = {
					city: this.userInfo.city,
					region: this.userInfo.region
				}
				this.$apis.updateUserInfo(params).then((res) => {
					if (res.code === 0) {
						this.$userInfo.city = this.userInfo.city;
						this.$userInfo.region = this.userInfo.region;
						uni.showToast({
							title: '修改成功!',
							icon:"success"
						})
					}
				});
			},
			pickerColumnchange(e) {
				const column = e.detail.column;
				const value = e.detail.value;
				if (column === 0) {
					const citiesList = [];
					config.area[value].cities.forEach(item => {
						citiesList.push(item.cityName);
					})
					const countiesList = [];
					config.area[value].cities[0].counties.forEach(item => {
						if (item.countyName !== '市辖区') {
							countiesList.push(item.countyName);
						}
					})
					this.areaList.splice(column + 1, 1, citiesList);
					this.areaList.splice(column + 2, 1, countiesList);
					this.areaIndex = [value, 0, 0];
				}
				if (column === 1) {
					const countiesList = [];
					config.area[this.areaIndex[0]].cities[value].counties.forEach(item => {
						if (item.countyName !== '市辖区') {
							countiesList.push(item.countyName);
						}
					})
					this.areaList.splice(column + 1, 1, countiesList);
					this.areaIndex = [this.areaIndex[0], value, 0];
				}
			},
			chooseLabels() {
				uni.navigateTo({
					url: '/pages/interestChoose?type=2&labels=' + this.interests.join(',')
				})
			},
			changeLabels() {
				this.userInfo.labels = this.interests.join(',');
				const params = {
					labels: this.userInfo.labels
				}
				this.$apis.updateUserInfo(params).then((res) => {
					if (res.code === 0) {
						this.$userInfo.labels = this.userInfo.labels;
						uni.$emit('refreshLabels');
						uni.showToast({
							title: '修改成功!',
							icon:"success"
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 99;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}
		}

		.info-list {
			width: 100%;
			margin-top: 31rpx;
			overflow-y: auto;

			.info-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
			}

			.info-item {
				width: 654rpx;
				height: 108rpx;
				padding: 0 46rpx 0 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info-content {
					display: flex;
					align-items: center;

					.avatar-img {
						width: 77rpx;
						height: 77rpx;
						border-radius: 40rpx;
					}

					.info-arrow {
						width: 11rpx;
						height: 23rpx;
						margin-left: 19rpx;
					}
				}

				.info-text {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					text-align: end;
				}
				
				.signature-input {
					margin-top: 30rpx;
					width: 100%;
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
				}
			}

			.info-item-sign {
				width: 654rpx;
				padding: 33rpx 46rpx 33rpx 46rpx;
				display: flex;
				flex-direction: column;
				
				.sign-text {
					font-size: 32rpx;
					font-weight: 400;
					color: #DDDDDD;
					margin-top: 40rpx;
				}
			}
			
			.info-item-tag {
				width: 654rpx;
				padding: 33rpx 46rpx 33rpx 46rpx;
				display: flex;
				flex-direction: column;
				
				.tag-box {
					display: flex;
					flex-wrap: wrap;
					margin-top: 32rpx;
					
					.tag-item {
						width: 144rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #F0F3F6;
						font-size: 28rpx;
						line-height: 64rpx;
						font-weight: 400;
						text-align: center;
						color: #222222;
						margin-bottom: 16rpx;
						margin-right: 16rpx;
					}
					
					.add-label {
						width: 144rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #F0F3F6;
						font-size: 50rpx;
						font-weight: 400;
						color: #DDDDDD;
						text-align: center;
						line-height: 64rpx;
					
						.add-label-img {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			.line {
				width: 654rpx;
				height: 2rpx;
				background: #F0F3F6;
				margin-left: 46rpx;
			}
		}
	}
</style>
